<template>
    <lemon-common uri="menu" :is-tree="true" ref="commonRef" :search-form-model="searchFormModel" search-permission="FIND" :search-form-item="searchFormItem" :search-condition="searchCondition" :table-item="tableItem" :table-height="tableHeight" :dialog-info-form-model="dialogInfoFormModel" :dialog-info-form-item="dialogInfoFormItem" :dialog-edit-form-model="dialogEditFormModel" :dialog-edit-form-item="dialogEditFormItem" :dialog-add-form-model="dialogAddFormModel" :dialog-add-form-item="dialogAddFormItem" @on-add="getSelect" @on-edit="getSelect" @on-info="getSelect"></lemon-common>
</template>

<script setup lang="ts">
import { reactive, inject, h, ref } from "vue";
import LemonIcon from "@/components/LemonIcon.vue";
import { statusOptions, statusFormat } from "@/utils/common";

//获取自定义全局方法
const { rule, http } = inject<any>("method");

//表格高度
const tableHeight = ref<string>("calc(100vh - 154px)");

//查询父菜单选择的对象
const parentOptions = ref<any[]>([]);

//查询路径选择的对象
const pathOptions = ref<any[]>([]);

//公共组件ref
const commonRef: any = ref(null);

//搜索的form
const searchFormModel = reactive({
    name: "",
    status: null,
});

//搜索form子项
const searchFormItem = reactive({
    name: { label: "名称", type: "input", clearable: true },
    status: { label: "状态", type: "select", options: statusOptions },
});

//搜索的条件
const searchCondition = reactive({
    name: "like",
});

const menuIconFormat = (row: any, column: any) => {
    return h(LemonIcon, { size: "20", icon: row.icon, style: "padding-right:5px;top: 4px;", value: row[column.property] }, () => "");
};

//表格每一项
const tableItem = reactive([
    { prop: "name", label: "菜单名称", minWidth: "250", formatter: menuIconFormat },
    { prop: "path", label: "路径", minWidth: "150" },
    { prop: "createBy", label: "创建人", minWidth: "150" },
    { prop: "createTime", label: "创建时间", minWidth: "200" },
    { prop: "updateBy", label: "修改人", minWidth: "150" },
    { prop: "updateTime", label: "修改时间", minWidth: "200" },
    { prop: "status", label: "状态", minWidth: "100", formatter: statusFormat },
]);

//弹出框详情form
const dialogInfoFormModel = reactive({
    path: "",
    parentId: null,
    name: "",
    icon: "",
    seq: null,
    treeLinkId: "",
    createBy: "",
    createTime: null,
    updateBy: "",
    updateTime: null,
    status: null,
});

//弹出框详情form子项
const dialogInfoFormItem = reactive({
    name: { label: "名称", type: "input", readonly: true },
    icon: { label: "图标地址", type: "icon", readonly: true },
    path: { label: "路径", type: "input", readonly: true },
    parentId: { label: "父菜单", type: "tree-select", options: parentOptions, readonly: true },
    createBy: { label: "创建人", type: "input", readonly: true },
    createTime: { label: "创建时间", type: "datetime", readonly: true },
    updateBy: { label: "修改人", type: "input", readonly: true },
    updateTime: { label: "修改时间", type: "datetime", readonly: true },
    status: { label: "状态", type: "select", options: statusOptions, readonly: true },
});

//弹出框编辑form
const dialogEditFormModel = reactive({
    id: null,
    path: "",
    parentId: null,
    name: "",
    icon: "",
});

//弹出框编辑form子项
const dialogEditFormItem = reactive({
    name: { label: "名称", type: "input" },
    path: { label: "路径", type: "select", options: pathOptions },
    parentId: { label: "父菜单", type: "tree-select", options: parentOptions, checkStrictly: true, rules: rule.require.select("父菜单") },
    icon: { label: "图标", type: "icon", rules: rule.require.select("状态") },
});

//弹出框添加form
const dialogAddFormModel = reactive({
    path: "",
    parentId: null,
    name: "",
    icon: "",
});

//弹出框添加form子项
const dialogAddFormItem = reactive({
    name: { label: "名称", type: "input" },
    path: { label: "路径", type: "select", options: pathOptions },
    parentId: { label: "父菜单", type: "tree-select", options: parentOptions, checkStrictly: true, rules: rule.require.select("父菜单") },
    icon: { label: "图标", type: "icon", rules: rule.require.select("状态") },
});

//查询选择的对象
const getSelect = async () => {
    const data = await http.get("/menu/findSelect");
    parentOptions.value = data?.parentMenuList;
    pathOptions.value = data?.pathList;
};
</script>

<style scoped lang="less"></style>
